<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul{
            list-style-type: none;
        }
        #ul1{
            /*
            1.把 边框去掉
            2. 把li标签上面的点号去掉
            */
            margin: auto;
            padding: 0;
            width: 400px;
        }
        #ul1>li{
            /*
            给li标签整个增加背景颜色
            给li标签增加下面的分析
            */
            background-color: #8bd400;
            margin-bottom: 2px;
            margin-left: 2px;
            height: 40px;
            width: 80px;
            border-radius: 5px;
            float: left;
        }
        a{
            /**
            把a标签的下划线去掉
             */
            display:block;
            height: 40px;
            text-decoration: none;
            /*
            把文字放在中间
            */
            text-align: center;
            /*
            把文字行间距和整个block一样,那么文字就居中了
            */
            line-height:40px;
            /*
            加上椭圆
            */

            border-radius: 5px;

        }

        #li1{
            position: relative;
        }

        #li1 ul{
            margin: 0;
            padding: 0;
            position: absolute;
            display: none;
        }



        #li1 ul>li{
            margin: 0;
            color: grey;
            text-align: left;
            border: 1px solid;
            background-color: #ffcf41;

        }

        /**
        当数据过去的时候,整体变成深绿色
         */
        a:hover{
            background-color: green;
        }

        /*.c_li1:hover #ul2{*/
            /*display: block;*/
        /*}*/

        #ul1 li:hover >a~ul{
            display: block;
        }

        #ul2 a:hover{
            background-color: blue;
        }

    </style>
</head>
<body>
<ul id="ul1">
    <li id="li1" class="c_li1">
        <a href="#">章节</a>
        <ul id="ul2" class="c_ul2">
            <li>
                <a>python
                </a>
            </li>
            <li>
                <a>go</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">问答</a>
    </li>
    <li>
        <a href="#">笔记</a>
    </li>
    <li>
        <a href="#">提问</a>
    </li>
</ul>
</body>
</html>